<template>
  <el-row class="h100">
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef"></div>
    </el-col>
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef1"></div>
    </el-col>
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef2"></div>
    </el-col>
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef3"></div>
    </el-col>
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef4"></div>
    </el-col>
    <el-col class="h50" :span="8">
      <div class="h100" ref="echartsMapRef5"></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const echartsMapRef = ref();
const echartsMapRef1 = ref();
const echartsMapRef2 = ref();
const echartsMapRef3 = ref();
const echartsMapRef4 = ref();
const echartsMapRef5 = ref();

const initChart = (dom: HTMLElement, title: string) => {
  const XData = ['100', '300', '500', '700', '900'];
  const chart = echarts.init(dom);

  const option = {
    title: {
      text: title,
      left: 'center',
      bottom: 0,
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 20,
      right: 20,
      top: 40,
      bottom: 50,
      containLabel: true,
    },
    legend: {},
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: 'IDW',
        barMaxWidth: 10,
        data: [220, 200, 180, 170],
        type: 'line',
      },
      {
        name: 'OK',
        barMaxWidth: 10,
        data: [170, 160, 130, 120],
        type: 'line',
      },
      {
        name: 'GGS',
        barMaxWidth: 10,
        data: [100, 60, 50, 40],
        type: 'line',
      },
    ],
  };
  chart.setOption(option);
};

const treemapChart = () => {
  const chart = echarts.init(echartsMapRef5.value);

  const option = {
    series: [
      {
        name: '',
        type: 'treemap',
        roam: false, // 是否开启拖拽漫游（移动和缩放）
        nodeClick: false, //点击节点后的行为,false无反应
        itemStyle: {
          label: {
            show: true,
            formatter: '{b}',
          },
        },
        data: [
          { value: 25, name: '对公银行' },
          { value: 70, name: '个人网银\n43%' },
          { value: 25, name: '直销银行\n43%' },
          { value: 25, name: '瑶瑶缴费\n43%' },
          { value: 10, name: '手机银行' },
        ],
      },
    ],
  };

  chart.setOption(option);
};

onMounted(() => {
  initChart(echartsMapRef.value, '空间密集度/CF');
  initChart(echartsMapRef1.value, '空间密集度/CF');
  initChart(echartsMapRef2.value, '空间密集度/CF');
  initChart(echartsMapRef3.value, '空间密集度/CF');
  initChart(echartsMapRef4.value, '空间密集度/CF');
  treemapChart();
});
</script>

<style lang="scss" scoped>
.h50 {
  height: 50%;
}
</style>
